<div style="text-align: center;color: #ff0000;">
    注意：窗口修改必须经过微信审核，务必谨慎！
</div>

<div style="margin: 20px 0px;text-align: center;" class="sui-row-fluid">
    <div class="span3">
        导航栏背景颜色<br />
        <color-assembly color="ngModel.topBar.navigationBarBackgroundColor" isname="navigationBarBackgroundColor" name="navigationBarBackgroundColor" class="tabbarcolor"></color-assembly>
    </div>
    <div class="span3">
        导航栏标题颜色<br />
        <navigation-bar-text-style ng-model="ngModel.topBar.navigationBarTextStyle"></navigation-bar-text-style>
    </div>
    <div class="span3">
        窗口背景色<br />
        <color-assembly color="ngModel.topBar.backgroundColor" isname="backgroundColor" name="backgroundColor" class="tabbarcolor"></color-assembly>
    </div>

    <div class="span3">
        下拉背景样式<br />
        <background-text-style ng-model="ngModel.topBar.backgroundTextStyle"></background-text-style>
    </div>
</div>

<div style="width: 560px; height: 50px; border: 0px solid {{ngModel.topBar.navigationBarBackgroundColor}};background-color: {{ngModel.topBar.navigationBarBackgroundColor}}; ">
    <div style="height: 100%;text-align: center;">
        <input type="text" ng-model="ngModel.topBar.navigationBarTitleText" style="color: {{ngModel.topBar.navigationBarTextStyle=='black' ? '#000000' : '#ffffff'}};width: 90%;height: 95%; border: 0px;text-align: center;background-color: {{ngModel.topBar.navigationBarBackgroundColor}};" >
    </div>
</div>

<div style="width: 560px;height: 100px;border-left: 1px solid {{ngModel.tabBar.borderStyle}};border-right: 1px solid {{ngModel.tabBar.borderStyle}};background-color: {{ngModel.topBar.backgroundColor}}; ">
    
</div>


<div style="width: 560px; height: 50px; border: 1px solid {{ngModel.tabBar.borderStyle}};background-color: {{ngModel.tabBar.backgroundColor}}; ">
    <div ng-repeat="a in ngModel.tabBar.list" style="width: {{100/ngModel.tabBar.list.length}}%;float: left;height: 100%;text-align: center;">
                
        <bottom-icon ng-model="a" index="{{$index}}" ></bottom-icon>

         <i class="sui-icon icon-tb-close" style="position:relative;left:40px;" ng-click="deleteTabBarItem($index)"></i>
        <!-- <img ng-src="{{$index==0 ? a.selectedIconPath : a.iconPath}}" style="height: 30px"> -->
        <br />
        <input type="text" ng-model="a.text" style="color: {{$index==0 ? ngModel.tabBar.selectedColor : ngModel.tabBar.color}};width: 90%; border: 0px;text-align: center;background-color: {{ngModel.tabBar.backgroundColor}};" />
          

        <page-path ng-model="a.pagePath" ></page-path>


    </div>
     
</div>

<div style="margin: 20px 0px;text-align: center;" class="sui-row-fluid">
    <div class="span2">
        字体颜色<br />
        <color-assembly color="ngModel.tabBar.color" isname="color" name="color" class="tabbarcolor"></color-assembly>
    </div>
    <div class="span2">
        背景颜色<br />
        <color-assembly color="ngModel.tabBar.backgroundColor" isname="backgroundColor" name="backgroundColor" class="tabbarcolor"></color-assembly>
    </div>
    <div class="span2">
        边框颜色<br />
        <color-assembly color="ngModel.tabBar.borderStyle" isname="borderStyle" name="borderStyle" class="tabbarcolor"></color-assembly>
    </div>

    <div class="span2">
        点中文字颜色<br />
        <color-assembly color="ngModel.tabBar.selectedColor" isname="selectedColor" name="selectedColor" class="tabbarcolor"></color-assembly>
    </div>
    <div class="span2">
        添加底部按钮<br />
        <a href="javascript:void(0);" calss="sui-btn btn-bordered btn-primary "  ng-click="addTabBarItem()"><i class="sui-icon icon-tb-add"></i>添加</a>
    </div>
 
</div>